<template>
    <div class="categoryContainer">
        <!-- 搜索组件 -->
        <div class="bottom">
            <div class="left">
                <Sidebar class="leftItem" v-model="c1Id">
                    <SidebarItem @click="changeC1Id(c1)" :title="c1.name" v-for="c1 in categoryL1List" :key="c1.id" />
                </Sidebar>
                <!-- <div class="leftItem active"></div> -->
            </div>
            <div class="right">
                <div class="header">
                    <van-image width="264" height="96" :src="(currentCategory.bannerList[0] || []).picUrl" />
                </div>
                <div class="title">床品家纺</div>
                <div class="goodsList">
                    <div class="goodsItem" v-for="c2 in categoryL2List" :key="c2.id">
                        <van-image width="72" height="72" :src="c2.wapBannerUrl" />
                        <div class="name">{{ c2.name }}</div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { ref } from 'vue';
export default defineComponent({
    name: 'category'
})
</script>
<script lang="ts" setup>
import { useCategoryInfoStore } from '@/stores/category';
import { storeToRefs } from 'pinia';
import { Button } from 'vant';
import { Image as VanImage } from 'vant';
import { onMounted } from 'vue';
import { Sidebar, SidebarItem } from 'vant';
import type { categoryListItem } from '@/api/category'
const CategoryInfoStore = useCategoryInfoStore()
const { categoryGroupList, categoryL1List, categoryL2List, currentCategory } = storeToRefs(CategoryInfoStore)
onMounted(() => {
    CategoryInfoStore.getCategoryInfo(c1Id.value)

})

const c1Id = ref(11)
const changeC1Id = (c1: categoryListItem) => {
    c1Id.value = c1.id
    CategoryInfoStore.getGoodsList(c1Id.value)
}
</script>

<style lang="less" scoped>
.categoryContainer {
    .bottom {
        display: flex;

        .left {
            width: 81px;

            :deep(.van-sidebar-item) {
                padding: 13px 10px;
            }

            :deep(.van-sidebar-item--select) {
                color: #ab2b2b;

                &::before {
                    content: '';
                    height: 20px;
                    background-color: #ab2b2b;
                }
            }

        }

        .right {
            // background-color: pink;
            padding: 15px 15px 0;


            .title {
                margin-top: 10px;
                width: 264px;
                height: 26px;
                font-size: 16px;
                font-weight: 900;
                border-bottom: 1px solid #aaa;
                margin-bottom: 20px;
            }

            .goodsList {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;

                .goodsItem {
                    width: 72px;
                    height: 108px;
                    font-size: 12px;
                    text-align: center;
                    // margin-right: 17px;
                }
            }

            ::after {
                content: '';
                width: 144px;
            }
        }
    }

}
</style>
